<template>
    <div class="deviceLeft-chart">
        <div id="deviceLeft-chart" style="width: 100%; height: 300px"></div>
        <div class="deviceLeft-chart-title">
            {{ currentNodeName }} {{ curYear }}年{{ curMonth ? curMonth + '月' : '' }} 用{{ getTitle() }}量
            <div class="rightTitle">
                <!-- <img src="@/assets/images/controlCenter/refresh.png" class="refresh" />
                <label> <i class="el-icon el-icon-upload2 download"></i>&nbsp;&nbsp;导出 </label>
                <label> <i class="el-icon el-icon-printer printer"></i>&nbsp;&nbsp;打印 </label> -->
            </div>
        </div>
    </div>
</template>

<script>
import moment from 'moment'
import {Utility} from '@/libs/utility.js'
import * as echarts from 'echarts'
import {AjaxCommon} from '@/libs/apiCommon'
import {PopupCommon} from '@/libs/popupCommon'
export default {
    props: ['name', 'currentNodeId', 'currentNodeName', 'dir', 'eqtype', 'date', 'currentEcharts'],
    computed: {
        cDir() {
            return this.dir
        }
    },
    watch: {
        cDir(newVal) {
            console.log(newVal)
            this.myChart.resize()
        },
        currentNodeId: {
            handler(newV) {
                if (newV) {
                    Utility.debounce(() => {
                        this.getData()
                    })
                }
            },
            deep: true,
            immediate: true
        },
        date: {
            handler(newV) {
                if (newV) {
                    Utility.debounce(() => {
                        this.getData()
                    })
                }
            },
            deep: true,
            immediate: true
        }
    },
    data() {
        return {
            messageData: {},
            curYear: null,
            curMonth: null,
            myChart: null
        }
    },
    mounted() {
        /*窗口自适应，关键代码*/
        window.onresize = () => {
            this.resizeEcharts()
        }
    },
    methods: {
        getData() {
            const currentNodeId = this.currentNodeId
            const eqtype = this.eqtype ?? '01'
            let dateN = this.date?.replace('-', '/')
            const currentEcharts = this.currentEcharts
            this.curYear = dateN.substr(0, 4)
            this.curMonth = null
            if (currentEcharts == 'month') {
                dateN = dateN.substr(0, 7).replace('-', '/')
                this.curMonth = dateN.slice(5, 7)
            } else {
                dateN = this.curYear
            }
            // 年总用电量 eq_type传01
            AjaxCommon(`/api/DataAnalysis/GetEnergyDetails`, 'post', {
                // 分析方式（0时间 1时段 2建筑部门回路 3工作日节假日 4使用类型 5能源分类） 默认为0
                fxfs_type: 0,
                //  设备类型（01电表02水表03气表，如多个类型同时传 |分隔，如01|02）默认：01
                eq_type: eqtype,
                // 对比方式（年同比 NTB， 月同比 YTB， 月环比 YHB，指定年 ZDN，指定月 ZDY） 默认："YHB"
                comp_method: currentEcharts == 'month' ? 'YHB' : 'NTB',
                // 时间（如 年2025 年/月 2025/11）
                comp_time: dateN,
                // 数据统计形式（总能耗ZNH,单位面积耗 DWMJNH，人均能耗 RJNH） 默认："ZNH";
                data_type: 'ZNH',
                // 能源统计单位（用量 YL ，金额 JE ） 默认："YL"
                data_dw: 'YL',
                //   建筑|部门|回路 GUID 默认为空，可不传（类型  建筑BD 部门DEP 分类回路 FL）
                //  传时要加类型|分开  如  建筑  BD|84f80a35-f795-4604-8541-d07e5845ebb1
                bd_guid: currentNodeId == '1' ? '' : currentNodeId
            }).then((res) => {
                if (res?.data?.Code == 200) {
                    this.messageData = res?.data.Message
                    this.initChart()
                } else {
                    PopupCommon.notify('error', res?.data?.msg)
                }
            })
        },
        resizeEcharts() {
            if (this.myChart) {
                console.log(1)
                this.myChart.resize()
                // this.myChart.refresh()
            }
        },
        getTitle() {
            var title = ''
            if (this.eqtype == '01') {
                title = '电'
            } else {
                title = '水'
            }
            return title
        },
        getUnit() {
            return this.name == 1 ? 'kWh' : 'm³'
        },
        initChart() {
            const messageData = this.messageData
            let dayList = []
            let oneList = []
            let twoList = []
            let threeList = []
            const unitName = this.getUnit()
            messageData.DATA.forEach((t) => {
                dayList.push(t.name)
                oneList.push(t.value1)
                twoList.push(t.value2)
                threeList.push(t.value3)
            })
            const chartDom = document.getElementById('deviceLeft-chart')
            const myChart = echarts.init(chartDom)
            myChart.clear()
            const option = {
                title: {
                    text: '单位：' + unitName,
                    left: '20',
                    top: '20',
                    textStyle: {
                        color: '#666',
                        fontSize: 12
                    }
                },
                // subtitle: {
                //     text: "综合能耗趋势分析",
                //     left: "left"
                // },
                toolbox: {
                    feature: {
                        print: {},
                        export: {}
                    },
                    right: 10
                },
                legend: {
                    x: 'center',
                    y: 'bottom',
                    itemWidth: 24,
                    itemHeight: 18,
                    textStyle: {
                        color: '#666'
                    },
                    itemGap: 30
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    top: '20%',
                    left: '10%',
                    right: '8%',
                    bottom: '20%'
                },
                xAxis: [
                    {
                        type: 'category',
                        data: dayList,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: `${messageData.TITLE1}`,
                        type: 'bar',
                        data: oneList
                    },
                    {
                        name: `${messageData.TITLE2}`,
                        type: 'line',
                        data: twoList,
                        lineStyle: {
                            color: 'green'
                        }
                    },
                    {
                        name: `${messageData.TITLE3}`,
                        type: 'line',
                        data: threeList,
                        lineStyle: {
                            color: 'orange'
                        }
                    }
                ]
            }
            myChart.setOption(option)
            this.myChart = myChart
        }
    }
}
</script>

<style scoped lang="scss">
.deviceLeft-chart {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    // div:first-child {
    //     background-color: red;
    //     div:first-child {
    //         background-color: blue;
    //     }
    // }
    .deviceLeft-chart-title {
        position: absolute;
        top: 10px;
        text-align: center;
        right: 0;
        left: 0;
        .rightTitle {
            text-align: right;
            width: 180px;
            float: right;
            margin-right: 20px;
            span {
                text-align: center;
                font-weight: bold;
                font-size: 18px;
            }
            label {
                text-align: right;
                float: right;
                color: #3b8cfc;
                margin-right: 15px;
                cursor: pointer;
                font-size: 16px;
            }
            .refresh {
                float: right;
                cursor: pointer;
                width: 16px;
                margin-top: 4px;
            }
            .printer {
                color: #3b8cfc;
            }
            .download {
                color: #3b8cfc;
            }
        }
    }
}
</style>
